<template>
	<view class="mh100 pb115 bfa">
		<!-- 绑定信息展示 -->
		<view class="p23">
			<view class="bf p3 bs15 t-c info-card" :class="{ 'bound': isBound }">
				<view class="status-title">
					<text>当前绑定状态</text>
					<text class="status-icon" :style="{ color: isBound ? '#07c160' : '#ff4444' }">
						{{ isBound ? '✓' : '×' }}
					</text>
				</view>
				<view class="f40 wei mt20" :style="{ color: textColor }">
					{{ isBound ? boundName : '未授权' }}
				</view>
				<view v-if="isBound" class="f28 mt20" :style="{ color: textColor }">
					授权ID：{{ currentAuthId }}
				</view>
			</view>
		</view>

		<!-- 授权操作区 -->
		<view class="p23">
			<view class="bf p3 bs15 input-card">
				<mg-input v-model="newAuthId" isr="1" :ht="isBound ? '新授权ID' : '授权ID'" htc="c3 f30"
					:pr="isBound ? '请输入新的授权ID' : '请输入16位数字授权ID'" icn="t-r" t="number" maxlength="16" />
			</view>
		</view>

		<!-- 操作按钮 -->
		<view class="foot-btnc p-r" style="padding-top: 40rpx">
			<button @click="handleSubmit" :disabled="loading" :class="['foot-btn', { 'update-btn': isBound }]" :style="{ 
          background: isBound ? '#fff' : '#FE9367',
          border: isBound ? '1px solid #FE9367' : 'none'
        }">
				<text :style="{ color: isBound ? '#FE9367' : '#fff' }">
					{{ isBound ? '更新授权' : '立即绑定' }}
				</text>
				<text v-if="loading" class="iconfont icon-loading rotate"></text>
			</button>
		</view>
	</view>
</template>

<script>
	import {
		utilMixins
	} from '@/common/util-mixins.js';
	import mgInput from '@/components/form/mg-input.vue';

	export default {
		mixins: [utilMixins],
		components: {
			mgInput
		},
		data() {
			return {
				showloading: false,
				loading: false,
				newAuthId: '',
				currentAuthId: '',
				isBound: false, // 默认未绑定
				boundName: ''
			};
		},
		computed: {
			textColor() {
				return this.isBound ? '#fff' : '#B71C1C';
			}
		},
		mounted() {
			this.checkBoundStatus();
		},
		methods: {
			async checkBoundStatus() {
				try {
					const res = await this.mockStatusRequest();
					if (res.code === 1) {
						this.updateAuthStatus(res.data);
					}
				} catch (e) {
					console.log('初始化状态：未绑定');
				}
			},

			async handleSubmit() {
				if (!this.validateInput()) return;

				this.loading = true;
				try {
					const res = await this.processAuthorization();
					this.handleResponse(res);
				} catch (e) {
					this.util.message('操作失败，请稍后重试', 3);
				} finally {
					this.loading = false;
					this.newAuthId = '';
				}
			},

			validateInput() {
				if (!/^\d{16}$/.test(this.newAuthId)) {
					this.util.message('请输入16位数字授权ID', 3);
					return false;
				}
				return true;
			},

			async processAuthorization() {
				return new Promise((resolve) => {
					setTimeout(() => {
						resolve({
							code: 1,
							data: {
								merchantName: `认证商户${Math.floor(Math.random()*1000)}`,
								authId: this.newAuthId
							}
						});
					}, 800);
				});
			},

			handleResponse(res) {
				if (res.code === 1) {
					this.updateAuthStatus(res.data);
					this.util.message('授权成功', 1);
				} else {
					this.util.message('授权ID无效', 3);
				}
			},

			updateAuthStatus(data) {
				this.isBound = true;
				this.boundName = data.merchantName;
				this.currentAuthId = data.authId;
			},

			mockStatusRequest() {
				return new Promise(resolve => {
					setTimeout(() => {
						resolve({
							code: 0
						});
					}, 500);
				});
			}
		}
	};
</script>

<style scoped lang="scss">
	/* 信息卡片样式 */
	.info-card {
		border-radius: 16rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
		transition: all 0.3s;
		// background: linear-gradient(145deg, #FFEBEE, #FFCDD2);
		background: #fe93673d;
		border: 1px solid rgba(183, 28, 28, 0.2);

		&.bound {
			background: linear-gradient(145deg, #FE9367, #FBDE41);
			border: 1px solid rgba(253, 197, 71, 0.2);
		}
	}

	.status-title {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10rpx;
		font-size: 32rpx;

		.status-icon {
			font-weight: bold;
			font-size: 40rpx;
		}
	}

	.input-card {
		background: #fff;
		border: 1px solid #eee;
	}

	.foot-btn {
		width: 60%;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 22rpx;
		font-size: 32rpx;
		transition: all 0.3s;
	}

	@keyframes rotating {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	.rotate {
		animation: rotating 1s linear infinite;
	}
</style>